<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>问卷调查</title>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/old/css/modal-px.scss?" media="screen" title="no_title" charset="utf-8">
    <link rel="stylesheet" href="/old/css/questionnaire/wenjuan.scss?__inline" media="screen" title="no_title" charset="utf-8">
</head>
<body style="visibility: hidden;">
<div class="main" id="main">
    <header id="act-title">webtv_2.2产品基线版本满意度问卷调查（华栖云内部）</header>
    <section>
        <article id="act-desc">
            各位云服务运维童鞋、项目实施同事，业务线童鞋：<br/>
            　　为了充分的了解你们队webtv产品基线版本发布后的
            满意度情况，真实获取到我们产品在发版质量、部署难易
            程度、版本缺陷和产品不租的意见，我么在这次webtv基
            线版本正式发版同事，准备了一份问卷调查，希望每一位
            对webtv产品版本有抱怨、有期待、有需求的业务运维及
            项目部门童鞋都积极参与，我们会在你们的反馈中不断的
            总结和认真的准备，真去让接下里没一个基线版本都会让
            大家越来越放心和有信心。最后再次感谢大家一致对产品
            给各位带来的困扰和担心给予了充分的包容，也感谢大家
            的参与。
        </article>
        <ul id="act-list">
            <li class="show" data-type="3" data-id="4400adb4-80a7-4529-8058-4f68ef4d7953" data-required="0"
                data-islinked="0">
                <div class="title">1. 你的姓名</div>
                <div class="blank">
                    <input type="text">
                </div>
            </li>
            <li class="show" data-type="2" data-id="eb337925-bc4c-4914-8360-38346029269b" data-required="0"
                data-islinked="0">
                <div class="title">2. 下列你喜欢的数字组合有哪些?</div>
                <div class="options">
                    <div class="option" data-type="checkbox" data-id="2a169bbe-3003-4ac6-a07d-5292eee82709">
                        <i class="checkbox"></i>
                        <span>A 66</span>
                    </div>
                    <div class="option" data-type="checkbox" data-id="b7b69441-71a3-470e-b469-08f47a6a9b4d">
                        <i class="checkbox"></i>
                        <span>B 55</span>
                    </div>
                    <div class="option" data-type="checkbox" data-id="7d154f3e-fcda-42b4-b313-3c56393e8ed2">
                        <i class="checkbox"></i>
                        <span>C 44</span>
                    </div>
                    <div class="option" data-type="checkbox" data-id="fe498773-25e0-463c-baa5-99b70c369839">
                        <i class="checkbox"></i>
                        <span>D 33</span>
                    </div>
                    <div class="option" data-type="checkbox" data-id="3407cc96-0077-4c18-b07e-37534d5db49f">
                        <i class="checkbox"></i>
                        <span>E 22</span>
                        <img src="/old/images/questionnaire/002.png" alt=""/>
                        <input type="text"/>
                    </div>
                </div>
            </li>
        </ul>
    </section>
    <footer>
        <a class="submit" id="submit">提交</a>
    </footer>
</div>
<div class="hidden">
    <img src="/old/images/questionnaire/selected_checkbox_icon.png" alt=""/>
    <img src="/old/images/questionnaire/selected_radio_icon.png" alt=""/>
</div>
<script type="text/template" id="question-template">
    {{each quizzes as item i}}
    <li class="show" data-type="{{item.type}}" data-id="{{item.id}}" data-required="{{item.validations.required}}" data-islinked="{{item.configurations.linked?1:0}}">
        {{if item.validations.required==1}}
        <div class="title">{{i+1}}. {{item.title}}<i>*</i></div>
        {{else}}
        <div class="title">{{i+1}}. {{item.title}}</div>
        {{/if}}
        {{if item.type=='1'}}
        <div class="options">
            {{each item.options as option j}}
            <div class="option" data-type="radio" data-id="{{option.id}}">
                <i class="radio"></i>
                <span>{{j+1 | numberFormat}} {{option.text}}</span>
                {{if option.resource}}
                <img src="{{option.resource}}" alt=""/>
                {{/if}}
                {{if option.fillable}}
                <input type="text"/>
                {{/if}}
            </div>
            {{/each}}
        </div>
        {{/if}}
        {{if item.type=='2'}}
        <div class="options">
            {{each item.options as option j}}
            <div class="option" data-type="checkbox" data-id="{{option.id}}">
                <i class="checkbox"></i>
                <span>{{j+1 | numberFormat}} {{option.text}}</span>
                {{if option.resource}}
                <img src="{{option.resource}}" alt=""/>
                {{/if}}
                {{if option.fillable}}
                <input type="text"/>
                {{/if}}
            </div>
            {{/each}}
        </div>
        {{/if}}
        {{if item.type=='3'}}
        <div class="blank">
            <input type="text"/>
        </div>
        {{/if}}
    </li>
    {{/each}}
</script>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 针对uc横竖屏rem html没有重绘的问题
                var style;
                if (style = document.getElementById("forhtml")) {
                    style.parentNode.removeChild(style);
                }
                style = document.createElement("style");
                style.id = "forhtml";
                document.head.appendChild(style);
                style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
            };
        recalc();
        document.body.style.visibility = 'visible';
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener('touchstart', function () {
            }, false);
        }
    })(document, window);
</script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/zepto.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/zepto-adapter.js"></script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/device.js"></script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/modal.js"></script>
<script>
    var dataJson ={
        "code": 200,
        "message": "success",
        "data": {
            "activity": {
                "id": "7c09eaf1-bcd9-43ad-9283-8c91b562912d",
                "category": 2,
                "name": "的是打发的",
                "start_time": "2018-05-16 00:00:00",
                "end_time": "2019-07-25 00:00:00",
                "limit": {},
                "background_img": "http:\/\/cloud-activity-test.oss-cn-shanghai.aliyuncs.com\/tmp\/20180517\/10\/20180517105835458093.png",
                "background_color": "",
                "description": "<p>的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫的风格史蒂夫<\/p>",
                "app_url": "",
                "publishing": {
                    "app": {
                        "is_open": "on",
                        "app_urls": ["http:\/\/wjtestmorefun.chinamcloud.com\/web#\/web\/activity\/index"]
                    },
                    "wechat": {
                        "is_open": "on",
                        "qr_code": []
                    }
                },
                "shares": {
                    "isopen": "on",
                    "title": "111111",
                    "content": "111111111111",
                    "icon": "http:\/\/cloud-activity-test.oss-cn-shanghai.aliyuncs.com\/tmp\/20180516\/16\/20180516164117794106.jpg",
                    "thumb": "http:\/\/cloud-activity-test.oss-cn-shanghai.aliyuncs.com\/tmp\/20180516\/16\/20180516164117794106.jpg"
                }
            },
            "quizzes": [{
                "id": "64d5fe9e-d703-4f74-8861-2cab203b04ec",
                "type": 1,
                "title": "你最喜欢的颜色是什么?",
                "configurations": {
                    "linked": false
                },
                "validations": {
                    "required": true
                },
                "options": [{
                    "id": "0c588329-2d6c-4cb4-84cf-68a3e1351950",
                    "text": "红色",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "660606c7-5c98-42ff-80ec-c620e0a72dde",
                    "text": "蓝色",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "06b3fa4e-acc2-4d3a-9bee-7b7c06fba780",
                    "text": "白色",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "7ac60fd3-6b03-4661-bc08-903ce2686670",
                    "text": "绿色",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "9b49e977-485b-4040-a4c5-79e3f44e60ac",
                    "text": "黑色",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "7cb00cef-033e-40cb-8aae-ba9385911070",
                    "text": "其他",
                    "resource": "",
                    "fillable": true,
                    "fill_required": true
                }]
            }, {
                "id": "cd9a2c8a-88f2-4fa4-9f34-e179656f7a52",
                "type": 2,
                "title": "你常吃的早餐有哪些?",
                "configurations": {
                    "linked": false
                },
                "validations": {
                    "required": true
                },
                "options": [{
                    "id": "bbb3886c-d648-4175-98e8-251495f35f01",
                    "text": "包子",
                    "resource": "/images/questionnaire/001.jpg",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "e6529f74-318f-4c6d-bec7-0903c81b9276",
                    "text": "馒头",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "503c806c-5bad-4c26-8029-2de454af9c64",
                    "text": "花卷",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "4a50bc6a-7fe9-4eb0-a2ed-9206e960c6ee",
                    "text": "豆浆",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "b200c75f-4bf8-4d2f-aca6-aea4d1bbd5da",
                    "text": "油条",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "6a8c9bb4-22bb-4163-9810-7bb120c53d7f",
                    "text": "面包",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "7bad0a9a-658a-45b3-a4b5-f7d4ec1356db",
                    "text": "牛奶",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "11dba990-ccd0-40b2-ad51-b541a5e5fb7a",
                    "text": "水果",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "9782eec3-c3db-44e7-a55f-22b291407533",
                    "text": "粥",
                    "resource": "",
                    "fillable": false,
                    "fill_required": false
                }, {
                    "id": "9bd5b9a9-6184-41b3-8738-bebb36d2ec59",
                    "text": "其他",
                    "resource": "",
                    "fillable": true,
                    "fill_required": false
                }]
            }, {
                "id": "c5481a36-2c90-4f2d-b95a-cf35f4b3da33",
                "type": 3,
                "title": "你的联系方式?",
                "configurations": {
                    "linked": false
                },
                "validations": {
                    "required": true
                },
                "options": []
            }]
        }
    };
</script>
<script type="text/javascript">
    $(document).ready(function () {
        //获取链接中参数列表
        function GetRequest(url) {
            if (!url || url.indexOf('?') == -1) {
                return {};
            }
            var url = url.split('?')[1].split('#')[0]; //获取url中"?"符后"#"前的字串
            var theRequest = new Object();
            var str = decodeURI(url);
            var strs;
            if (str.indexOf("&") != -1) {
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
                }
            } else {
                theRequest[str.split("=")[0]] = decodeURIComponent(str.split("=")[1]);
            }
            theRequest['vote_id'] = theRequest['act_id'];

            return theRequest;
        }
        window.parameter = GetRequest(window.location.href);
        //时间格式化
        Date.prototype.Format = function (time) {
            var obj = {
                "M+": this.getMonth() + 1,
                "d+": this.getDate(),
                "h+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "q+": Math.floor((this.getMonth() + 3) / 3),
                "S": this.getMilliseconds()
            };
            if(/(y+)/.test(time)){
                time = time.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
            }
            for (var key in obj){
                if (new RegExp("(" + key + ")").test(time)){
                    time = time.replace(RegExp.$1, (RegExp.$1.length == 1) ? (obj[key]) : (("00" + obj[key]).substr(("" + obj[key]).length)));
                }
            }
            return time;
        }
        var start_time = new Date().Format("yyyy-MM-dd hh:mm:ss");

        //生成字母表
        function generateAlphabet(){
            var alphabet = [];
            for(var i=65;i<95;i++){
                alphabet.push(String.fromCharCode(i));
            }
            return alphabet;
        }
        var alphabet = generateAlphabet();

        //验签
        function signCallBack() {
            if(window.parameter.mfSign){
                if(window.parameter.userid || window.parameter.uid){
                    $.ajax({
                        url:'/api/app/sign/mf.php',
                        data:window.parameter,
                        type: 'get',
                        success: function(ajaxData) {
                            if (ajaxData.code == 200) {
                                return 1;
                            } else {
                                alert(ajaxData.message);
                                return 0;
                            }
                        },
                        error: function(){
                            alert('网络异常！');
                            return 0;
                        }
                    });
                }else{
                    return -1;
                }
            }else{
                return -2;
            }
        }
        var isSignPass = signCallBack();

        //过滤器
        template.helper('numberFormat', function (number) {
            return  String.fromCharCode(64+parseInt(number));
        });

        //渲染问题列表
//        function renderQuestion(data){
            var data = dataJson.data;
            var links = {},idIndex=[];
            $.each(data.quizzes,function(i,item){
                if(item.configurations.linked){
                    links[item.configurations.link_id] = {
                        to_id: item.id,
                        option_ids: item.configurations.link_option_ids
                    };
                }
            });
            $('#act-list').html(template('question-template',data));
            setTimeout(function(){
                var $quizList = $('#act-list li'),$optionList=$('#act-list .options .option');
                $quizList.each(function(i,item){
                    if($(this).data('islinked')==1){
                        $(this).removeClass('show');
                    }
                    idIndex.push($(this).data('id'));
                });
                $optionList.off('click').on('click',function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    var $this = $(this);
                    var quiz_id = $this.parents('li').data('id');
                    var option_id = $this.data('id');
                    if($(this).data('type')=='radio'){
                        $(this).siblings('.option').removeClass('selected');
                        $(this).addClass('selected');
                        if(links[quiz_id]){
                            if(links[quiz_id].option_ids.indexOf(option_id)>-1){
                                $quizList.eq(idIndex.indexOf(links[quiz_id].to_id)).addClass('show');
                            }else{
                                $quizList.eq(idIndex.indexOf(links[quiz_id].to_id)).removeClass('show');
                            }
                        }
                    }else if($(this).data('type')=='checkbox'){
                        $(this).toggleClass('selected');
                        if(links[quiz_id]){
                            var flag = false;
                            $(this).parents('.options').find('.option.selected').each(function(i,item){
                                if(links[quiz_id].option_ids.indexOf($(item).data('id'))>-1){
                                    flag = true;
                                }
                            });
                            if(flag){
                                $quizList.eq(idIndex.indexOf(links[quiz_id].to_id)).addClass('show');
                            }else{
                                $quizList.eq(idIndex.indexOf(links[quiz_id].to_id)).removeClass('show');
                            }
                        }
                    }
                });
                $('#act-list .options .option input').off('click').on('click',function(e){
                    e.preventDefault();
                    e.stopPropagation();
                });
                $('#act-list .options .option img').off('click').on('click',function(e){
                    e.preventDefault();
                    e.stopPropagation();
                });
            },10);
//        }

        //请求活动信息
        function requestActInfo(callback){
            $.ajax({
                type: 'GET',
                url: '/api/activities/'+window.parameter['act_id']+'/quizzes',
                success: function (data) {
                    if (data.code == 200) {
                        callback(data.data.activity);
                        renderQuestion(data.data);
                        return data.data;
                    } else {
                        alert(data.message);
                    }
                }
            });
        }
        var act_info = requestActInfo(function(data){
            $('#act-title').html(data.data.name);
            $('#act-desc').html(data.data.description);
        });

        //提交验证
        function submitValidate(){
            $.ajax({
                type: 'GET',
                url: '/api/activities/'+window.parameter['act_id']+'/quizzes/useable?uid='+window.parameter['uid'],
                success: function (data) {
                    if (data.code == 200) {
                        if (data.data.reason == 'act-does-not-exist') {
                            $.alert(data.data.comment, function (e) {
                                window.history.go(-1);
                            });
                        }
                        if (data.data.reason == 'already-involved') {
                            $('#submit').addClass('disabled').text('已提交');
                        }
                        return data.data;
                    } else {
                        alert(data.message);
                    }
                }
            });
        }
        var validateObj = submitValidate();

        //提交表单
        $('#submit').on('click',function(e){
            e.preventDefault();
            e.stopPropagation();
            if(isSignPass == -2){
                $.toast('请下载APP参与投票');
                return;
            }
            if(isSignPass == -1) {
                window.location.href = window.location.origin + window.location.pathname + window.location.search + '&noLogin=true';
                return;
            }
            if(isSignPass == 0){
                $.toast('非法请求，请在App中打开');
                return;
            }
            if(!validateObj.useable){
                $.alert(valdiateObj.comment);
                return;
            }
            var $this = $(this),sheets = [],$li = $('#act-list li.show');
            $li.each(function(i,item){
                var options = [],contents=[],$item=$(item);
                if($item.data('type')<3){
                    $(item).find('.option.selected').each(function(j,option){
                        options.push($(this).data('id'));
                        contents.push($(this).find('input[type=text]').val());
                    });
                    if(options.length==0&&$item.data('required')==1){
                        $.alert('第'+($item.index()+1)+'题请至少选择一项');
                        return false;
                    }
                }else if($item.data('type')==3){
                    contents[0] = $(item).find('.blank input[type=text]').val();
                    if(contents[0]==''&&$item.data('required')==1){
                        $.alert('第'+($item.index()+1)+'题必填');
                        return false;
                    }
                }
                sheets.push({
                    quiz_id: $(item).data('id'),
                    option_id: options,
                    fill_content: contents
                });
            });
            if(!$this.hasClass('disabled')){
                    $this.addClass('disabled');
                    $.ajax({
                        type: 'POST',
                        url: '/api/sheets/multiple',
                        data: {
                            activity_id: window.parameter['act_id'],
                            sheets: [{
                                quiz_id: "36eeb99c-06c4-48fb-ada3-797a395174c6",
                                option_id: [
                                    "f3755ebe-b345-4c2d-a0bd-06c1b9bbdd25"
                                ],
                                fill_content: "要学神仙"
                            }],
                            uid: window.parameter['uid'],
                            start_time: start_time
                        },
                        dataType: 'json',
                        success: function(data){
                            $this.removeClass('disabled');
                            if(data.code==200){
                                isAllowedVote(function(data){
                                    isAllowed = data.data.allowed;
                                    if(!isAllowed){
                                        if(data.data.type=='paused'||data.data.type=='act-not-start'||data.data.type=='not-found'){
                                            alert(typeObject[data.data.type]);
                                            hideAll();
                                        }else if(data.data.type=='act-end'||data.data.type=='no-times'){
                                            showResultPage();
                                        }
                                    }else{
                                        showVotePage();
                                        alert('投票成功，还可以继续哦！');
                                    }
                                });
                            }else{
                                alert(data.message);
                            }
                        },
                        error: function(data){
                            $this.removeClass('disabled');
                            alert(data.message);
                        }
                    });
                }
        });
    });
</script>
</body>
</html>
</html>